<template>
  <div class="work-container">
    <!-- <div class="input-wrapper">
        <el-select v-model="order">
          <el-option value="time" label="按时间" selected></el-option>
          <el-option value="course" label="按课程"></el-option>
        </el-select>
    </div> -->
    <div class="work-wrapper">
      <el-table :data="homework" style="width: 100%" v-loading="loading">
        <el-table-column label="课堂作业" class-name="row-header">
            <el-table-column prop="date" label="截止日期" align="center"></el-table-column>
            <el-table-column prop="title" label="标题" align="center"></el-table-column>
            <el-table-column prop="courseName" label="课程名" align="center"></el-table-column>
            <el-table-column  label="删除" v-if="userInfo.role == 2"  align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="danger" @click="deleteWork(scope.$index ,'homework')">删除</el-button>
                </template>
            </el-table-column>
            <el-table-column  label="修改" v-if="userInfo.role == 2"  align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary"><router-link :to="{name: 'createWork', params: {title: scope.row.title, course: scope.row.courseName, deadline: scope.row.date, questions: scope.row.questions, assignment_id: scope.row.assignment_id}}" class="show-btn">修改</router-link></el-button>
                </template>
            </el-table-column>
            <el-table-column label="详情" type="expand" align="center">
                <template slot-scope="props">
                    <div v-for="(item, index) in props.row.questions" :key="index" class="question-item">
                        <div class="title" :style="{background: titleBg}">
                            题目{{ index + 1 }}
                        </div>
                        <div class="detail">
                            <div class="content">{{ item.text }}</div>
                            <router-link v-if="userInfo.role==2" :to="{ name: 'question', params: { questionId: item.ti_id, text: item.text, questionType: '1', answer: item.answer}}"  class="show-btn">查看</router-link>
                            <router-link v-if="userInfo.role==1" :to="{ name: 'homework', params: { questionId: item.ti_id, text: item.text, questionType: '1', projectId: item.project_id, courseId: task.course_id, answer: item.answer}}"  class="show-btn">开始编码</router-link>
                        </div>
                    </div>
                </template>
            </el-table-column>                
        </el-table-column>
      </el-table>
    </div>
    <div class="work-wrapper">
        <!-- <WorkRecord v-for="(item, index) in tasks" :key="index" :task="item" :type="'0'"></WorkRecord> -->
        <el-table :data="coursedwork" style="width: 100%">
          <el-table-column label="课程作业" class-name="row-header">
              <el-table-column prop="date" label="截止日期" align="center"></el-table-column>
              <el-table-column prop="title" label="标题" align="center"></el-table-column>
              <el-table-column prop="courseName" label="课程名" align="center"></el-table-column>
              <el-table-column  label="删除" v-if="userInfo.role == 2"  align="center" prop="assignment_id">
                  <template slot-scope="scope">
                    <el-button size="mini" type="danger" @click="deleteWork(scope.$index ,'coursedwork')" >删除</el-button>
                  </template>
              </el-table-column>
              <el-table-column  label="修改" v-if="userInfo.role == 2"  align="center">
                  <template slot-scope="scope">
                    <router-link :to="{name: 'createWork', params: {title: scope.row.title, course: scope.row.courseName, deadline: scope.row.date, questions: scope.row.questions, assignment_id: scope.row.assignment_id}}" class="show-btn">
                      <el-button size="small" type="primary">修改</el-button>
                      </router-link>
                  </template>
              </el-table-column>
              <el-table-column label="详情" type="expand" align="center">
                  <template slot-scope="props">
                      <div v-for="(item, index) in props.row.questions" :key="index" class="question-item">
                          <div class="title" :style="{background: titleBg}">
                              题目{{ index + 1 }}
                          </div>
                          <div class="detail">
                              <div class="content">{{ item.text }}</div>
                              <router-link v-if="userInfo.role==2" :to="{ name: 'question', params: { questionId: item.ti_id, text: item.text, questionType: '1', answer: item.answer}}"  class="show-btn">查看</router-link>
                              <router-link v-if="userInfo.role==1" :to="{ name: 'homework', params: { questionId: item.ti_id, text: item.text, questionType: '1', projectId: item.project_id, courseId: props.row.course_id, answer: item.answer}}"  class="show-btn">开始编码</router-link>
                          </div>
                      </div>
                  </template>
              </el-table-column>                
          </el-table-column>
        </el-table>
    </div>
    <!-- <el-pagination
      background
      layout="prev, pager, next"
      class="pager"
      prev-text="上一页"
      next-text="下一页"
      :total="1000">
    </el-pagination> -->
</div>
</template>
<script>
import WorkRecord from '@/components/WorkRecord'
import { getTask, getQuestions, deleteWork} from '@/utils/api'

var bg = require('../assets/题目标题.png')

export default {
  name: 'work',
  components: {
    WorkRecord
  },
  data () {
    return {
      titleBg: 'url(' + bg + ') no-repeat',
      order: 'time',
      homework: [],
      coursedwork: [],
      loading: true
    }
  },
  computed: {
    tasking () {
      let arr = this.$store.state.tasking
      arr.reverse()
      return arr
    },
    tasks () {
      let arr = this.$store.state.tasks
      arr.reverse()
      return arr
    },
    userInfo () {
      return this.$store.state.userInfo
    }
  },
  watch: {
    order (newValue, oldValue) {
    }
  },
  mounted () {
    // if (!this.tasks.length) {
    this.getMyWorks()
    this.getMyTasking()
    // }
  },
  methods: {
    async deleteWork (index, key) {
      let assignment_id = this[key][index].assignment_id
      let res = await deleteWork({assignment_id: assignment_id})
      // console.log(res)  
      if(res.error == 10){
        this[key].splice(index, 1)
      }
    },
    async getMyWorks () {
      let res = await getTask({ filter_by_course_id: '', assignment_type: '0' })
      if (res.error === '10') {
        this.$store.commit('setTasks', res.result)
        // console.log(this.tasking)
        for(let i=0; i<this.tasks.length; i++){
            let item = this.tasks[i];
            this.setActive(item.assignment_id, item, 'coursedwork')
        }
      } else {
        this.$notify({
          title: '获取课程出错',
          message: res.result,
          type: 'error'
        })
      }
    },
    async setActive (assignment_id, task, key) {
      if (!task.questions) {
        let res = await getQuestions({ assignment_id: assignment_id })
        if (res.error === '10') {
          this.$store.commit('setQuestions', {task: task, questions: res.result})
          this[key].push({
            date: task.dead_line,
            title: task.title,
            courseName: task.course_name,
            questions: task.questions,
            assignment_id: task.assignment_id
          })
        } else {
          this.$notify({
            title: '获取失败',
            message: res.result,
            type: 'error'
          })
        }
      }
    },
    async getMyTasking () {
      let res = await getTask({ filter_by_course_id: '', assignment_type: '1' })
      if (res.error === '10') {
        this.$store.commit('setTasking', res.result)
        for(let i=0; i<this.tasking.length; i++){
            let item = this.tasking[i];
            this.setActive(item.assignment_id, item, 'homework')
        }
      } else {
        this.$notify({
          title: '获取课程出错',
          message: res.result,
          type: 'error'
        })
      }
      this.loading = false
    }
  }
}
</script>

<style lang="less">
* {
  text-decoration: none;
}
.work-container {
  width: 80%;
  margin: 40px auto;
  @media screen and (max-width: 768px){
    width: 96%;
    margin-top: 15px;
  }
}
.input-wrapper {
    margin: 30px 0 0 0;
}

.work-wrapper {
    padding-top: 30px;
}

.work-wrapper .work-type-title {
    color: #35a9e3;
}
.pager {
  width: 80%;
  margin: 0 auto;
  margin-top: 30px;
}
.question-item {
    margin-bottom: 20px;
}

.question-item .title {
    color: #fff;
    padding-left: 5px;
    width: 120px;
}

.question-item .detail {
    margin-left: 120px;
    background: #e5e5e5;
    padding: 15px 20px 15px 30px;
    display: flex;
    @media screen and (max-width: 768px){
        margin-left: 0
    }
}

.question-item .content {
    flex: 1;
    white-space:pre-wrap;
}

.question-item .show-btn {
    color: #2990cd;
    background: #fff;
    border: none;
    width: 120px;
    padding: 5px;
    align-self: flex-end;
    text-align: center;
}
.row-header {
  color: #35a9e3;
  font-size: 20px;
}
</style>
